<template>
  <div class="layout-container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-left">
        <div class="logo">
          <img src="/logo.png" alt="Logo" class="logo-img" />
          <span class="logo-text">RBAC权限管理系统</span>
        </div>
      </div>
      <div class="header-right">
        <t-space>
          <!-- 消息通知 -->
          <t-popup content="消息通知" placement="bottom">
            <t-button variant="text" shape="circle">
              <t-badge count="3" dot>
                <BellIcon />
              </t-badge>
            </t-button>
          </t-popup>
          
          <!-- 用户操作 -->
          <t-dropdown :options="userOptions" @click="handleUserMenuClick">
            <t-button variant="text">
              <t-space>
                <t-avatar :image="userAvatar" size="small">{{ userInfo.username?.charAt(0) }}</t-avatar>
                <span>{{ userInfo.username }}</span>
                <ChevronDownIcon />
              </t-space>
            </t-button>
          </t-dropdown>
        </t-space>
      </div>
    </header>

    <!-- 主体内容区 -->
    <div class="main-content">
      <!-- 左侧菜单栏 -->
      <aside class="sidebar">
        <t-menu
          :value="activeMenu"
          :collapsed="menuCollapsed"
          @change="handleMenuChange"
          theme="light"
        >
          <t-menu-item value="dashboard">
            <template #icon>
              <DashboardIcon />
            </template>
            仪表盘
          </t-menu-item>
          
          <t-submenu value="user-management">
            <template #icon>
              <UserIcon />
            </template>
            <template #title>用户管理</template>
            <t-menu-item value="user-list">用户列表</t-menu-item>
            <t-menu-item value="user-add">添加用户</t-menu-item>
          </t-submenu>
          
          <t-submenu value="role-management">
            <template #icon>
              <ShieldIcon />
            </template>
            <template #title>角色管理</template>
            <t-menu-item value="role-list">角色列表</t-menu-item>
            <t-menu-item value="role-add">添加角色</t-menu-item>
          </t-submenu>
          
          <t-submenu value="permission-management">
            <template #icon>
              <KeyIcon />
            </template>
            <template #title>权限管理</template>
            <t-menu-item value="permission-list">权限列表</t-menu-item>
            <t-menu-item value="permission-add">添加权限</t-menu-item>
          </t-submenu>
          
          <t-menu-item value="system-settings">
            <template #icon>
              <SettingsIcon />
            </template>
            系统设置
          </t-menu-item>
        </t-menu>
        
        <!-- 菜单折叠按钮 -->
        <div class="menu-collapse">
          <t-button variant="text" @click="menuCollapsed = !menuCollapsed">
            <template #icon>
              <t-icon :name="menuCollapsed ? 'chevron-right' : 'chevron-left'" />
            </template>
          </t-button>
        </div>
      </aside>

      <!-- 右侧内容区 -->
      <main class="content-area">
        <router-view />
      </main>
    </div>

    <!-- 底部版权信息 -->
    <footer class="footer">
      <div class="footer-content">
        <p>© 2024 RBAC权限管理系统 v1.0.0 | 技术支持：技术团队</p>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { MessagePlugin } from 'tdesign-vue-next'
import { useAuthStore } from '@/stores/auth'
import {
  BellIcon,
  ChevronDownIcon,
  DashboardIcon,
  UserIcon,
  ShieldIcon,
  KeyIcon,
  SettingsIcon,
} from 'tdesign-icons-vue-next'

const router = useRouter()
const authStore = useAuthStore()

const activeMenu = ref('dashboard')
const menuCollapsed = ref(false)
const userInfo = reactive({
  username: '',
  avatar: ''
})

const userOptions = [
  { content: '个人信息', value: 'profile' },
  { content: '修改密码', value: 'password' },
  { content: '退出登录', value: 'logout' }
]

const userAvatar = ref('')

// 获取用户信息
const getUserInfo = async () => {
  try {
    const info = await authStore.getUserInfo()
    userInfo.username = info.username
    userInfo.avatar = info.avatar
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

// 处理菜单切换
const handleMenuChange = (value: string) => {
  activeMenu.value = value
  const routeMap: Record<string, string> = {
    'dashboard': '/',
    'user-list': '/users',
    'user-add': '/users/add',
    'role-list': '/roles',
    'role-add': '/roles/add',
    'permission-list': '/permissions',
    'permission-add': '/permissions/add',
    'system-settings': '/settings'
  }
  
  if (routeMap[value]) {
    router.push(routeMap[value])
  }
}

// 处理用户菜单点击
const handleUserMenuClick = (value: string) => {
  switch (value) {
    case 'profile':
      router.push('/profile')
      break
    case 'password':
      router.push('/change-password')
      break
    case 'logout':
      authStore.logout()
      MessagePlugin.success('退出登录成功')
      router.push('/login')
      break
  }
}

onMounted(() => {
  getUserInfo()
})
</script>

<style scoped>
.layout-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.header-left .logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.header-right {
  display: flex;
  align-items: center;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 240px;
  background: #fff;
  border-right: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  transition: width 0.3s;
}

.sidebar.collapsed {
  width: 64px;
}

.content-area {
  flex: 1;
  padding: 24px;
  background: #f5f5f5;
  overflow-y: auto;
}

.menu-collapse {
  padding: 16px;
  border-top: 1px solid #e5e5e5;
  text-align: center;
}

.footer {
  height: 50px;
  background: #f8f9fa;
  border-top: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-content {
  text-align: center;
  color: #666;
  font-size: 14px;
}

.t-menu {
  flex: 1;
  border-right: none;
}
</style>